<template>
  <div class="monitoring">
    <div class="container-box">
      <div class="page-container">
        <LeftContainer :tree="tree" @emitSel="getSel"></LeftContainer>
        <div class="preset-log right-container">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="事件内容">
              <el-input
                v-model="formInline.user"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker
                v-model="formInline.region"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="formInline = {}">重置</el-button>
            </el-form-item>
          </el-form>
          <div>
            <!-- tab页面 -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane
                :label="`推荐处理(${data1})`"
                name="first"
              ></el-tab-pane>
              <el-tab-pane
                :label="`全部事件(${data2})`"
                name="second"
              ></el-tab-pane>
            </el-tabs>
            <div style="margin: 20px 0 20px">
              <el-button type="primary" style="margin-right: 30px"
                >批量处理
              </el-button>
              <el-radio-group v-model="tabPosition">
                <el-radio-button label="全部"></el-radio-button>
                <el-radio-button label="已读"></el-radio-button>
                <el-radio-button label="未读"></el-radio-button>
              </el-radio-group>
            </div>

            <!-- 表格部分 -->
            <el-table
              v-loading="loading"
              :data="roleList"
              :header-cell-style="{ background: '#F3F5FC' }"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="序号" align="center" width="80">
                <template slot-scope="scop">
                  {{ scop.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="事件名称" prop="name" />
              <el-table-column
                label="事件级别"
                prop="level"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span
                    class="Inspan"
                    :class="
                      scope.row.level == '一般'
                        ? 'simple'
                        : scope.row.level == '较大'
                        ? 'big'
                        : scope.row.level == '重大'
                        ? 'major'
                        : 'serious'
                    "
                    >{{ scope.row.level }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column label="事件分类" prop="classify" />
              <el-table-column label="事件描述" prop="desc"></el-table-column>
              >
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">

                    <el-button size="mini" type="text"
                      @click="handleGo"

                    >启动应急响应预案
                  </el-button>
                  <el-button size="mini" type="text" @click="open = true"
                    >转工单
                  </el-button>
                  <el-button
                    v-if="scope.row.parentId != 0"
                    size="mini"
                    type="text"
                    @click="$router.push('/eventlist')"
                    >详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 转工单对话框 -->
            <el-dialog
              title="转工单"
              :visible.sync="open"
              width="750px"
              append-to-body
              class="dia-style"
            >
              <form-1 :showSave="false"></form-1>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">保 存</el-button>
                <el-button @click="cancel">取 消</el-button>
              </div>
            </el-dialog>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import form1 from "../../../components/security/moni/form1.vue";
import LeftContainer from "@/components/trees/LeftContainer.vue";
import { mapMutations } from 'vuex'

export default {
  components: { form1, LeftContainer },
  data() {
    return {
      data1: 3,
      data2: 9,
      tabPosition: "",
      open: false,
      //   表单
      formInline: {
        user: "",
        region: "",
      },
      activeName: "second",
      // 总条数
      total: 14,
      //是否在加载
      loading: true,
      roleList: [],
      checkList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined,
      },
      //   树形结构的值
      tree: [
        {
          title: "事件级别",
          name: "sj",
          id: 1,
          showchild: true,
          child: [
            {
              title: "特别重大",
              num: 1,
              id: 1,
            },
            {
              title: "重大",
              num: 6,
              id: 2,
            },
            {
              title: "一般",
              num: 2,
              id: 3,
            },
          ],
        },
        {
          title: "事件分类",
          name: "jb",
          id: 2,
          showchild: true,
          child: [
            {
              title: "用户违规",
              num: 7,
              id: 4,
            },
            {
              title: "运维异常",
              num: 2,
              id: 5,
            },
            {
              title: "网络攻击",
              num: 0,
              id: 6,
            },
          ],
        },
      ],
    };
  },
  methods: {
    ...mapMutations({CHANGE_SHOWBACK:'portrait/CHANGE_SHOWBACK'}),
    // 获取子组件传参
    getSel(data) {
      this.checkList = data;
    },
    // 提交的方法
    onSubmit() {
      this.showIndex = false;
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    } /** 查询角色列表 */,
    getList() {
      let role = [
        {
          name: "违规外联事件",
          level: "特别重大",
          label: "11003",
          classify: "用户违规",
          desc: "违规外联事件",
          auto: "否",
          send: "否",
        },
        {
          name: "终端部件和外设变化异常事件",
          level: "重大",
          label: "11004",
          classify: "用户违规",
          desc: "终端部件和外设变化异常事件",
          auto: "否",
          send: "否",
        },
        {
          name: "终端异常数据输出",
          level: "重大",
          label: "11004",
          classify: "用户违规",
          desc: "终端异常数据输出",
          auto: "否",
          send: "否",
        },
        {
          name: "运维终端、服务器链接国际互联网或其他公共信息网络",
          level: "重大",
          label: "11004",
          classify: "运维异常",
          desc: "运维终端、服务器链接国际互联网或其他公共信息网络",
          auto: "否",
          send: "否",
        },
        {
          name: "用户链接国际互联网或其他公共信息网络",
          level: "重大",
          label: "11004",
          classify: "用户违规",
          desc: "用户链接国际互联网或其他公共信息网络",
          auto: "否",
          send: "否",
        },
        {
          name: "异常开机事件",
          level: "重大",
          label: "11004",
          classify: "用户违规",
          desc: "异常开机事件",
          auto: "否",
          send: "否",
        },
        {
          name: "网络直接链接互联网",
          level: "重大",
          label: "11004",
          classify: "用户违规",
          desc: "网络直接链接互联网",
          auto: "否",
          send: "否",
        },
        {
          name: "网络中出现未登记设备接入",
          level: "一般",
          label: "11004",
          classify: "用户违规",
          desc: "网络中出现未登记设备接入",
          auto: "否",
          send: "否",
        },
        {
          name: "安全防护软件关键策略变化事件",
          level: "一般",
          label: "11004",
          classify: "运维异常",
          desc: "安全防护软件关键策略变化事件",
          auto: "否",
          send: "否",
        },
      ];
      if (!this.checkList.length) {
        this.roleList = role;
      } else if (this.checkList.length == 1) {
        this.roleList = role.filter((item) => {
          // return this.checkList.includes(item.level) ||  this.checkList.includes(item.classify)
          return this.checkList.some((i) => {
            return i.title == item.level || i.title == item.classify;
          });
        });
      } else {
        this.roleList = role.filter((item) => {
          // return this.checkList.includes(item.level) &&  this.checkList.includes(item.classify)
          let arr1 = this.checkList.map((i) => {
            return i.title;
          });
          return (
           arr1.includes(item.level) &&
           arr1.includes(item.classify)
          );
        });
      }

      this.loading = true;
      this.total = this.roleList.length;
      this.loading = false;
      // axios.get("test.json").then((res) => {
      //   this.roleList = res.data.data.list;
      //   this.total = res.data.data.total;
      //   this.loading = false;
      //   console.log(this.roleList);
      // });
    },
    submitForm() {},
    // 取消按钮
    cancel() {
      this.open = false;
    },
    //  启动应急
    handleGo(){
      this.$router.push('/judge/Emergency');
      this.CHANGE_SHOWBACK(true);
    }
  },
  mounted() {
    this.getList();
  },
  watch: {
    checkList(newValue, oldValue) {
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__header {
  margin: 20px 0 0 !important;
}
.container-box,
.monitoring {
  height: 100%;
}
.preset-log {
  height: 100%;
  display: flex;
  flex-direction: column;

  .el-form {
    //margin-top: 20px;
    //height: 50px;
    display: flex;
    align-items: flex-end;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }

  .page-container {
    width: 100%;
    flex: 1;
    height: 100%;
  }

  .baocun {
    display: none;
  }
}

.container-box .page-container .right-container {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: auto;
  padding: 20px;
}
</style>
